<!--
 * @Author: LAB
 * @Date: 2021-05-20 16:17:51
 * @Description: 
 * @FilePath: \client-app\src\views\storeroom\components\storeroom-select.vue
-->
<template>
  <div>
    <DxTreeList v-bind="treeListOptions" :dataSource="dataSource">
      <template #select></template>
    </DxTreeList>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { dxTreeListColumn, dxTreeListOptions } from "devextreme/ui/tree_list";
import {
  DxTreeList,
  DxColumn,
  DxColumnChooser,
  DxHeaderFilter,
  DxSearchPanel,
  DxSelection,
  DxLookup,
} from "devextreme-vue/tree-list";
import DataSource from "devextreme/data/data_source";
@Options({
  components: {
    DxTreeList,
  },
})
export default class StoreroomSelect extends Vue {
  dataSource = [
    {
      id: "1",
      parentId: "",
      value1: "中药方",
      value2: "ccc",
    },
    {
      id: "2",
      parentId: "1",
      value1: "西药房",
      value2: "ccc",
    },
    {
      id: "3",
      parentId: "1",
      value1: "中药方",
      value2: "ccc",
    },
  ];
  treeListOptions: dxTreeListOptions = {
    keyExpr: "id",
    parentIdExpr: "parentId",
    dataStructure: "plain",
    rootValue:"",
    width: "calc(40vw - 255px)",
    columns: [
      {
        caption: "库房选择",
        dataField: "value1",
      },
      {
        caption: "服务科室",
        dataField: "value2",
        showEditorAlways: true,
        editCellTemplate: "select",
      },
    ],
  };
}
</script>

<style scoped>
</style>